<template>
  <div class="server-manage">
    <HeaderControl title="服务分配">
      <template #control>
        <el-button type="primary" @click="serverDialog = true">添加服务</el-button>
      </template>
    </HeaderControl>
    <div class="manage-content main-content" v-loading="tableLoading">
      <div class="content-search">
        <el-form inline>
          <el-form-item label="服务名称">
            <el-input v-model="queryData.name" placeholder="请输入服务名称" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="_getServerList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="content-list">
        <el-table :data="serverList">
          <el-table-column type="index" label="序号" width="54px" />
          <el-table-column prop="name" label="服务名称" width="250px" />
          <el-table-column prop="url" label="服务地址" width="300px" />
          <el-table-column label="服务logo" width="200px">
            <template #default="{ row }">
              <div class="server-logo">
                <img :src="row.logo" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" />
          <el-table-column label="操作" width="150px">
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <PaginationView :total="queryData.total" :pageSize="queryData.pageSize" :currentPage="queryData.currentPage"
        @changeSize="handleSizeChange" @currentChange="handleCurrentChange" @refreshList="_getServerList"
        :canChoose="false" />
    </div>
    <!-- 规则添加/编辑 -->
    <el-dialog :title="serverForm.id ? '编辑服务' : '添加服务'" v-model="serverDialog" width="30%" @close="dialogClose">
      <el-form :model="serverForm" ref="serverFormRef" :rules="serverFormRules" label-width="80px" label-position="right">
        <el-form-item label="服务名称" prop="name">
          <el-input v-model="serverForm.name"></el-input>
        </el-form-item>
        <el-form-item label="服务地址" prop="url">
          <el-input v-model="serverForm.url"></el-input>
        </el-form-item>
        <el-form-item label="服务描述">
          <el-input v-model="serverForm.description" type="textarea" :autosize="{ minRows: 3 }"></el-input>
        </el-form-item>
        <el-form-item label="服务logo">
          <el-input v-model="serverForm.logo"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="serverDialog = false">取消</el-button>
          <el-button type="primary" @click="submitServer">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/* eslint-disable */
import { ref, reactive, onMounted } from 'vue'
import { getServerList, addServer, updateServer, deleteServer } from '@/api/server'
import { ElMessage, ElMessageBox } from 'element-plus'

// 规则列表查询
const defaultQuery = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 15
})
const queryData = ref(Object.assign({}, defaultQuery))
const tableLoading = ref(false)
const serverList = ref([])
const _getServerList = async () => {
  tableLoading.value = true
  try{
    const res = await getServerList(queryData.value)
    if(res.code === 20000) {
      serverList.value = res.data.list
      queryData.value.total = res.data.total
    }
  }catch{
    serverList.value = []
  }
  tableLoading.value = false
}
// 规则表单
const serverDialog = ref(false)
const serverFormRef = ref(null)
const defaultServerForm = reactive({
  name: '',
  url: '',
  description: '',
  logo: ''
})
const serverForm = ref(Object.assign({}, defaultServerForm))
const serverFormRules = reactive({
  name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
  url: [{ required: true, message: '请输入服务地址', trigger: 'blur' }]
})
// 编辑规则
const handleEdit = (row) => {
  serverForm.value = Object.assign({}, row)
  serverDialog.value = true
}
const submitServer = () => {
  serverFormRef.value.validate(async (valid) => {
    if(valid) {
      let res
      if(serverForm.value.id) {
        res = await updateServer(serverForm.value)
      } else {
        res = await addServer(serverForm.value)
      }
      if(res.code === 20000) {
        serverDialog.value = false
        ElMessage.success('操作成功')
        _getServerList()
      }
    }
  })
}
const dialogClose = () => {
  serverFormRef.value.resetFields()
  serverForm.value = Object.assign({}, defaultServerForm)
}
// 删除规则
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该规则吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(() => {
    deleteServer({ids: [row.id]}).then(res => {
      if(res.code === 20000) {
        ElMessage.success('删除成功')
        _getServerList()
      }
    })
  }).catch(() => {})
}
/*****************************分页器start*********************************/
// 页数修改
const handleCurrentChange = (page) => {
  queryData.value.currentPage = page
  _getServerList()
}
const handleSizeChange = (size) => {
  queryData.value.pageSize = size
  _getServerList()
}
/*****************************分页器end**********************************/
onMounted(() => {
  _getServerList()
})
</script>

<style lang='scss' scoped>
.server-manage {
  .manage-content{
    margin-top: 20px;
    .content-list {
      .server-logo{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

::v-deep .main-content {
  .el-table th.el-table__cell {
    background-color: #f2f2f2;
    color: #333333;
  }
}
</style>